<template>
    <el-dialog v-model="show" :title="title" width="30%" :before-close="handleClose">
        <el-form ref="formRef" :model="form" status-icon :rules="rules" label-width="120px" label-position="top"
            class="myform">


            <slot :form="form"></slot>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :type="type" @click="confirmAction">
                    确认{{ btn }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, computed, ref, reactive, watch } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { formRefType, RoleFace } from '../utils/types';
import { ShowError } from '../utils/message';

const emits: any = defineEmits()
const props: any = defineProps({
    title: {
        type: String,
        default: "标题"
    },
    btn: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: 'danger'
    },
    rules: {
        type: Object,
        default: {}
    },
    flag: {
        type: Boolean,
        default: false
    }

})
const show = ref<boolean>(false)
const formRef = ref<formRefType | any>()
const form = ref<any>({})

const handleClose = () => {
    formRef.value.resetFields()
    show.value = false;
}
const confirmAction = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {

            emits("todoconfirm", form.value)
        } else {
            ShowError('请输入有效的表单数据')
        }
    })
}


defineExpose({
    show,
    form,
    handleClose
})
</script>